<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <a :href="target">插值和指令</a>
    <!-- v-show：显示隐藏的切换，如果表达式为真，指令所在的标签就显示；否则不显示，添加display: none; -->
    <!-- 如果登录就显示用户名，未登录就显示请登录 -->
    <p v-show="isLogin">{{username}}</p>
    <p v-show="!isLogin">{{placeholder}}</p>
    <hr>
    <!-- v-if:显示隐藏的切换。如果表达式为真，指令所在的标签就渲染，否则就不渲染。 -->
    <p v-if="isLogin">{{username}}</p>
    <p v-else>{{placeholder}}</p>
    <button @click="isLogin = !isLogin">切换登录状态</button>
    <hr>
    <!-- v-for当数据量比较多或者不固定时，需要用v-for显示重复的内容。可以遍历数组、对象、整数 -->
    <p v-for="(item,index) in kongFu">{{index + 1}}.第{{item}}招</p>
    <hr>
    <p v-for="(item, index) in kongFuPlus">
      {{index + 1}}.
      <span>名称：{{item.name}}</span>
      <span>价格：￥{{(item.price * 1).toFixed(2)}}</span>
    </p>
    <hr>
    <!-- v-for循环正整数 -->
    <button v-for="num in 5">{{num}}</button>
    <hr>
    <p v-for="i in 9">
      <span v-for="j in i">{{j}} * {{i}} = {{j*i}}</span>
    </p>
    <hr>
    <!-- v-for循环对象,三个参数依次是：对象的value、对象的key和key的index -->
    <p v-for="(item, key, index) in person">
      {{index+1}}.{{key}}:{{item}}
    </p>
  </div>
  <script src="./vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        username: 'Jack Ma',
        placeholder: '请登录',
        isLogin: false,
        kongFu: ['壹','贰','叁','肆','伍'],
        kongFuPlus: [
          {name: '亢龙有悔', price: '40'},
          {name: '飞龙在天', price: '150'},
          {name: '我没有闪', price: '200'},
          {name: '点到为止', price: '250'},
          {name: '万剑归宗', price: '10000'},
        ],
        person: {
          name: 'Pony Ma',
          age: 40,
          sex: '男',
          saying: '不充钱，你会变强吗？'
        },
        target: './day01插值和指令.html'
      }
    }); 
  </script>
</body>
</html>